<template>
	<div class="camera">
		<dv-full-screen-container>
			<div class="camera_title">

				<div class="camera_title_nei">
					<!-- <el-button type="primary" class="btn" @click="goback">返 回</el-button> -->
					<dv-decoration-3 style="width:250px;height:30px;display: inline-block;" />识别摄像头总览<dv-decoration-3
						style="width:250px;height:30px;display: inline-block;" />

				</div>
			</div>
			<div class="camera_date">
				<span class="cur-date" v-html="dateFormatStr"></span>
			</div>
			<div class="camera_line">
				<dv-decoration-10 style="width:100%;height:5px;" />
			</div>
			<div class="camera_center" >
				<div class="camera_center_item" v-for="(item,index) in tanPaneList" :key="index">
					<dv-border-box-8 :color="[ '#052470']" class="borerBox">
						<div :id="'divPlugin' + index" class="plugin" :style="{ display:show?'block':'none' }"></div>
					</dv-border-box-8>
				</div>






			</div>
		</dv-full-screen-container>
	</div>
</template>

<script>
	import {
		dateFormat
	} from '@/utils/time.js';
	import WebVideo from "@/utils/WebVideo.js";
	export default {
		data() {
			return {
				show:false,
				dateFormatStr: "",
				timeTimer: null,
				tanPaneList: [{
						ip: '192.168.1.242', //设备IP
						// iPrototocol: 1, //http 协议 1表示 http协议 2 表示 https协议
						port: '80', //登录设备 端口号
						username: 'admin', //用户
						password: 'jk123456' //密码

					},
					{
						ip: '192.168.1.208', //设备IP
						// iPrototocol: 1, //http 协议 1表示 http协议 2 表示 https协议
						port: '80', //登录设备 端口号
						username: 'admin', //用户
						password: 'HBhk0147' //密码
					},


				],
			}
		},
		methods: {
			goback() {
				this.$router.go(-1);
			},



			dealWithTime(date) {
				let data = new Date(date);
				let Y = data.getFullYear();
				let M = data.getMonth() + 1;
				let D = data.getDate();
				let H = data.getHours();
				let Min = data.getMinutes();
				let S = data.getSeconds();
				let W = data.getDay();
				H = H < 10 ? "0" + H : H;
				Min = Min < 10 ? "0" + Min : Min;
				S = S < 10 ? "0" + S : S;
				switch (W) {
					case 0:
						W = "日";
						break;
					case 1:
						W = "一";
						break;
					case 2:
						W = "二";
						break;
					case 3:
						W = "三";
						break;
					case 4:
						W = "四";
						break;
					case 5:
						W = "五";
						break;
					case 6:
						W = "六";
						break;
					default:
						break;
				}

				this.dateFormatStr =
					"<span >" +
					" 日期: " +
					"</span>" +
					Y +
					"<span >" +
					" 年 " +
					"</span>" +
					M +
					"<span >" +
					" 月 " +
					"</span>" +
					D +
					"<span>" +
					" 日  " +
					"</span>" +
					"<span >" +
					" 星期" +
					W +
					"  " +
					"</span>" +
					"<span >" +
					H +
					":" +
					Min +
					":" +
					S;
				("</span>");

				/* setInterval("dealWithTime()",1000);*/
			},
			VideoPlayers(domId, options) {
				return new Promise((resolve, reject) => {
					WebVideo.init({
						domId: domId
					}).then(() => {
						setTimeout(() => {
							WebVideo.clickLogin(options).then(res => {
								WebVideo.clickStartRealPlay();
								resolve();
							})
						}, 1000)
					})
				})
			},
			async refreshCom() {
				await this.nosee()
			},
			// 停止预览
			async nosee() {
				await WebVideo.I_StopAllPlay()
				setTimeout(()=>{
					 this.unLogin()
				},1000)
				
				// for (var i = 0; i < this.tanPaneList.length; i++) {
				// 	await WebVideo.clickLogout(this.tanPaneList[i].ip + '_' + this.tanPaneList[i].port).then(res => {
				// 		console.log('退出成功')
				// 	});
				// }
			},
			// 退出
			async unLogin() {
				
				for (var i = 0; i < this.tanPaneList.length; i++) {
					await WebVideo.clickLogout(this.tanPaneList[i].ip + '_' + this.tanPaneList[i].port).then(res => {
						WebVideo.I_DestroyPlugin();
						console.log('退出成功')
					});
				}
			},

			async initLogin() {
				for (var i = 0; i < this.tanPaneList.length; i++) {
					await this.VideoPlayers('divPlugin' + i, this.tanPaneList[i])
				}
			},


		},
		created() {
			this.show=true
			this.initLogin();
			
		},
		beforeDestroy() {
          this.refreshCom()
		  this.show=false
		},
		mounted() {
			this.timeTimer = setInterval(() => {
				this.dealWithTime(new Date());
			}, 1000);
		},
	}
</script>

<style>
	/* 移除边框和阴影 */
	.single-tabs .el-tabs__nav {
		border: none !important;
		box-shadow: none !important;
	}

	.single-tabs .el-tabs__header {
		border: none !important;
	}

	.single-tabs .el-tabs__item {

		margin-right: 13px !important;
		border-radius: 4px !important;
		/* 修改为您想要的文字大小 */
		font-size: 24px !important;
		color: #42E6DF !important;
		border: 1px solid #052470 !important;

	}


	/* 修改选中样式 */
	.single-tabs .el-tabs__item.is-active {
		border-radius: 4px !important;
		background-color: #2F1FFF !important;
		color: #fff !important;
		font-size: 24px !important;
		border: 1px solid #000 !important;


	}

	.el-dialog {
		background-color: #03143e;
		padding: 0 !important;
		/* 弹窗内部的背景色 */

	}

	.el-dialog__title {
		color: #fff !important;
	}

	.el-form-item__label {

		color: #fff !important;
		/* 设置 label 的字体颜色 */

	}

	.hisbtn {
		background-color: #2F1FFF !important;
		color: #fff !important;
		border: 0 !important;
	}
</style>



<style lang="scss" scoped>
	.camera {
		background-color: #03143e;
		height: 100vh;


		&_title {
			position: relative;
			margin: 22px 0;
			text-align: center;
			font-size: 28px;
			color: #42E8E0;
			font-weight: 550;

			&_nei {
				position: relative;
				justify-content: center;
				align-items: center;
				display: flex;

				.btn {
					background-color: #42E8E0;
					border-color: #42E8E0;
					color: #fff;
					width: 120px;
					height: 40px;
					position: absolute;
					left: 30px;
					top: 8px;
				}

			}

		}

		&_date {
			// float: right;
			font-size: 13px;
			position: absolute;
			right: 5%;
			top: 5px;
			color: #ccc;

		}

		&_center {

			padding: 40px 50px;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin: 0 auto;

			.borerBox {
				position: relative;


			}

			&_item {
				margin: 5px;
				padding: 10px;
				box-sizing: border-box;
				// width: 420px;
				// height: 380px;
				width: 45%;
				height: 600px;
				color: #fff;
				position: relative;

				.plugin {
					// width: 350px;
					// height: 280px;
					width: 600px;
					height: 500px;
					position: absolute;

					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto
				}


			}
		}
	}
</style>